<template>
    <div class="coupon">
        <manage-head :dialog-visible="dialogVisible" :search="search" @clearData="clearData"
            @setDialogVisible="setDialogVisible" @setUpdate="setUpdate" @setSearch="setSearch"></manage-head>
        <el-table :data="couponList" style="width: 100%">
            <el-table-column prop="store.name" label="店铺名称">
            </el-table-column>
            <el-table-column prop="storeActivity.amount" label="满减金额">
            </el-table-column>
            <el-table-column prop="storeActivity.discountAmount" label="扣减金额">
            </el-table-column>
            <el-table-column prop="storeActivity.startTime" label="开始时间">
            </el-table-column>
            <el-table-column prop="storeActivity.endTime" label="结束时间">
            </el-table-column>
            <el-table-column prop="storeActivity.limited" label="数量有限">
                <template slot-scope="scope">
                    <span v-show="scope.row.storeActivity.limited == 0">否</span>
                    <span v-show="scope.row.storeActivity.limited == 1">是</span>

                </template>
            </el-table-column>
            <el-table-column prop="storeActivity.number" label="优惠劵数量">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <Pagination :page="page" @currentChangeEvent="currentChangeEvent"></Pagination>


        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="form-box">
                <!-- <el-input v-model="coupon.storeId" placeholder="请输入店铺名称"></el-input> -->
                <el-select v-model="coupon.storeId" placeholder="请选择">
                    <el-option v-for="item in storeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="coupon.amount" placeholder="请输入满减金额"></el-input>
                <el-input v-model="coupon.discountAmount" placeholder="请输入扣减金额"></el-input>
                <!-- <el-input v-model="coupon.startTime" placeholder="开始时间"></el-input>
                <el-input v-model="coupon.endTime" placeholder="结束时间"></el-input> -->
                <el-date-picker v-model="datetime" @change="changeDate" type="datetimerange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
                <div>
                    <span>是否有限：</span>
                    <el-radio v-model="coupon.limited" :label="1">是</el-radio>
                    <el-radio v-model="coupon.limited" :label="0">否</el-radio>
                </div>

                <el-input v-model="coupon.number" placeholder="优惠劵数量"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import StoreActivity from '@/api/StoreActivity'
import ManageHead from '@/components/manage/ManageHead.vue'
import Pagination from '@/components/manage/Pagination.vue'

import DateFormatToString from '@/utils/common/DateFormat'
import STORE_ACTIVITY_API from '@/api/StoreActivity'
import STOREAPI from '@/api/store'

export default {
    components: {
        ManageHead,
        Pagination
    },
    data() {
        return {
            dialogVisible: false,
            search: '',
            update: 0,
            storeOptions: [],
            datetime: [],
            couponList: [],
            coupon: {
                "id": "",
                "storeId": "",
                "amount": null,
                "discountAmount": null,
                "startTime": "",
                "endTime": "",
                "limited": null,
                "overall": null,
                "number": null,
            },
            page: {
                "total": 2,
                "size": 10,
                "current": 1,
                "pages": 1
            }
        }
    },
    created() {
        this.getCouponList(1)
        this.getStoreList()
    },
    methods: {
        getCouponList(current) {
            let data = {
                current
            }
            this.$axios.post(StoreActivity.getStoreActivityByUserId, data)
                .then(res => {
                    if (res.code == 200) {
                        this.couponList = res.data.couponList.records
                        this.$success(res.message)
                    } else this.$error(res.message)
                })
        },
        getStoreList() {
            this.$axios.post(STOREAPI.GET_STORE_LIST)
                .then(res => {
                    if (res.code == 200) {
                        for (let i = 0; i < res.data.storeList.length; i++) {
                            let option = {
                                label: '',
                                value: '',
                            }

                            let store = res.data.storeList[i]
                            option.label = store.name
                            option.value = store.id

                            this.storeOptions.push(option)
                        }
                    } else this.$error(res.message)
                })
        },
        edit(data) {
            this.update = 1

            this.dialogVisible = true

            let coupon = data.storeActivity

            let keys = Object.keys(this.coupon)

            this.datetime[0] = coupon.startTime
            this.datetime[1] = coupon.endTime

            for (let i = 0; i < keys.length; i++) {
                let key = keys[i]
                this.coupon[key] = coupon[key]
            }
        },
        confirm() {
            //新增
            if (this.update == 0) {
                let data = this.coupon
                this.$axios.post(STORE_ACTIVITY_API.addStoreActivity, data)
                    .then(res => {
                        if (res.code == 200) {
                            this.$success(res.message)
                            this.getCouponList(this.current)

                            this.dialogVisible = false
                        }
                    })
            }

            else {
                this.$error("暂时不能删除优惠劵")
            }
        },
        setUpdate(val) {
            this.update = val
        },
        setDialogVisible(val) {
            this.dialogVisible = val
        },
        setSearch(val) {
            this.search = val
        },
        clearData() {
            this.coupon = {
                "id": "",
                "storeId": "",
                "amount": null,
                "discountAmount": null,
                "startTime": "",
                "endTime": "",
                "limited": null,
                "overall": null,
                "number": null,
                "createTime": null,
                "updateTime": null
            }
        },
        currentChangeEvent(current){
            this.getCouponList(current)
        },
        changeDate(date) {
            this.coupon.startTime = DateFormatToString(date[0])
            this.coupon.endTime = DateFormatToString(date[1])
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
    }
}
</script>

<style scoped>
.form-box>div {
    margin: 10px 0;
}
</style>